<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瞬影图床</title>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            animation: gradientBG 15s ease infinite;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        .container {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            text-align: center;
            max-width: 1000px;
            width: 90%;
            animation: fadeIn 1.2s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        h1 {
            font-size: 3rem;
            color: #333;
            margin-bottom: 40px;
            animation: slideIn 1.2s ease-in-out;
            font-family: 'Arial Black', sans-serif;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(-80px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .files-container {
            display: flex;
            overflow-x: auto;
            padding: 20px;
            gap: 30px;
            margin-bottom: 40px;
            scroll-behavior: smooth;
        }

        .files-container::-webkit-scrollbar {
            display: none;
        }

        .file-card {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 300px;
            min-width: 250px;
            flex: 1 0 auto;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .file-card:hover {
            transform: translateY(-10px);
        }

        .file-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }

        .file-card-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left;
        }

        .file-card-info div {
            font-size: 14px;
            color: #666;
        }

        .file-card button {
            padding: 10px 20px;
            background-color: #ff6b6b;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            margin: 0 5px;
        }

        .file-card button:hover {
            background-color: #ff4c4c;
            transform: scale(1.05);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            margin-top: 40px;
        }

        .action-button {
            padding: 15px 60px;
            background-color: #00a8ff;
            color: #fff;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .action-button:hover {
            background-color: #0085d4;
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
            text-align: center;
            z-index: 1000;
        }

        .spinner {
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-top: 5px solid #00a8ff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 10px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .progress-container {
            width: 300px;
            height: 15px;
            background-color: #f1f1f1;
            border-radius: 10px;
            margin: 20px auto;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .progress-bar {
            width: 0;
            height: 100%;
            background-color: #00a8ff;
            transition: width 0.3s ease;
        }

        .copy-btn {
            background-color: #2ca52c;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .copy-btn:hover {
            background-color: #218838;
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }
    </style>
</head>
<body>
<div class="container">
    <h1>瞬影图床</h1>
    <div class="files-container" id="filesContainer">
        <!-- 图片文件将动态添加到这里 -->
    </div>
    <form id="uploadForm" enctype="multipart/form-data">
        <label for="imageInput" class="action-button custom-file-upload">
            选择图片
        </label>
        <input type="file" id="imageInput" name="image" accept="image/*" multiple>
        <button type="submit" class="action-button upload-btn">上传</button>
    </form>
</div>
<div class="loading" id="loading">
    <div class="spinner"></div>
    <div>上传中，请稍候...</div>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const imageInput = document.getElementById('imageInput');
        const filesContainer = document.getElementById('filesContainer');
        const loading = document.getElementById('loading');
        const progressBar = document.getElementById('progressBar');
        const uploadForm = document.getElementById('uploadForm');

        let selectedFiles = [];
        let deletedFiles = [];
        let existingFileNames = new Set();

        imageInput.addEventListener('change', function (event) {
            const newFiles = Array.from(event.target.files);
            selectedFiles = selectedFiles.concat(newFiles);

            filesContainer.innerHTML = '';
            existingFileNames.clear();

            selectedFiles.forEach((file, index) => {
                if (!existingFileNames.has(file.name)) {
                    existingFileNames.add(file.name);
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const fileCard = document.createElement('div');
                        fileCard.className = 'file-card';
                        fileCard.dataset.fileIndex = index;
                        fileCard.innerHTML = `
                            <img src="${e.target.result}" alt="Selected Image">
                            <div class="file-card-info">
                                <div><strong>文件名:</strong> ${file.name}</div>
                                <div><strong>文件大小:</strong> ${file.size} bytes</div>
                                <div><strong>上传时间:</strong> ${new Date().toLocaleString()}</div>
                                <button class="copy-btn" onclick="copyURL(${index})">复制链接</button>
                                <button class="delete-btn" onclick="deleteImage(${index})">删除</button>
                            </div>
                        `;
                        filesContainer.appendChild(fileCard);
                    };
                    reader.readAsDataURL(file);
                }
            });
        });

        uploadForm.addEventListener('submit', function (event) {
            event.preventDefault();

            const formData = new FormData();
            selectedFiles.forEach((file, index) => {
                if (!deletedFiles.includes(index)) {
                    formData.append('image', file);
                }
            });

            const xhr = new XMLHttpRequest();

            loading.style.display = 'block';
            progressBar.style.width = '0%';

            xhr.open('POST', '/upload', true);

            xhr.upload.onprogress = function (event) {
                if (event.lengthComputable) {
                    const percentComplete = (event.loaded / event.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                }
            };

            xhr.onload = function () {
                loading.style.display = 'none';
                if (xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    console.log('上传成功:', response);
                    filesContainer.innerHTML = '';
                    response.keys.forEach(key => {
                        const fileCard = document.createElement('div');
                        fileCard.className = 'file-card';
                        fileCard.innerHTML = `
                            <img src="${key}" alt="Uploaded Image">
                            <div class="file-card-info">
                                <div><strong>文件名:</strong> ${key.split('/').pop()}</div>
                                <div><strong>文件大小:</strong> ${response.sizes[key]}</div>
                                <div><strong>上传时间:</strong> ${new Date().toLocaleString()}</div>
                                <button class="copy-btn" onclick="copyURL('${key}')">复制链接</button>
                                <button class="delete-btn" onclick="deleteUploadedImage('${key}')">删除</button>
                            </div>
                        `;
                        filesContainer.appendChild(fileCard);
                    });
                    selectedFiles = [];
                    deletedFiles = [];
                    existingFileNames.clear();
                    imageInput.value = '';
                } else {
                    console.error('上传失败:', xhr.responseText);
                    alert('上传失败，请重试！');
                }
            };

            xhr.send(formData);
        });

        window.deleteImage = function (index) {
            deletedFiles.push(index);
            const fileCard = filesContainer.querySelector(`[data-file-index="${index}"]`);
            if (fileCard) {
                fileCard.remove();
            }
        };

        window.deleteUploadedImage = function (key) {
            if (confirm('确定要删除这张图片吗？')) {
                const fileName = key.split('/').pop();
                const xhr = new XMLHttpRequest();
                xhr.open('DELETE', `/image/${fileName}`, true);

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        const fileCard = filesContainer.querySelector(`div img[src="${key}"]`).parentElement;
                        if (fileCard) {
                            fileCard.remove();
                        }
                    } else {
                        console.error('删除失败:', xhr.responseText);
                        alert('删除失败，请重试！');
                    }
                };

                xhr.send();
            }
        };

        window.copyURL = function (url) {
            const textarea = document.createElement('textarea');
            textarea.value = url;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('链接已复制到剪贴板！');
        };
    });
</script>
</body>
</html>